<template>
    <div class="header">
        <header :class="{'headerFixed-1': !isShow,'headerFixed-2': isShow}">
            <!-- <van-image  width="12vw" height="10vw" fit="fill" :src="require('@/assets/logo.png')"></van-image> -->
            <van-image  width="12vw" height="10vw" fit="fill" :src="img"></van-image>
            <div class="title">
                <div>海陵区殡葬公共服务平台</div>
                <div>尊重生命 · 服务生命 · 公正透明</div>
            </div>
        </header>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    const isShow = ref(false)
    const img = ref(new URL('@/assets/logo.png', import.meta.url).href)
</script>

<style lang="scss" scoped>
    .header {
        width: 100vw;
        height: 44px;
    }
    header {
        background-color: #fff;
        // background-color: #F7F7F7;
        // position: fixed;
        // top: 44px;
        width: 100vw;
        box-sizing: border-box;
        height: 44px;
        line-height: 22px;
        padding: 0 15px;
        color: #333333;
        border-bottom: 1px solid $divider-global;
        display: flex;
    }
    .headerFixed-1 {
        position: fixed;
        top: 0;
    }
    .headerFixed-2 {
        position: fixed;
        top: 44px;
    }
    .title {
        color: rgb(8, 192, 95);
        margin-left: 10px;
        font-size: 14px;
        text-align: left;
    }
    .title div:nth-child(1) {
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 5px;
    }
</style>